<template>
<div>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>文章列表</span>
      </div>
    </template>
    <!--      @@@@@@@@@@@-->
   <div style="width: 100%">
     <div style="display: flex;justify-content: center">
       文章分类：
       <el-select v-model="page.cate_id" placeholder="请选择分类">
         <el-option
             v-for="item in articleListCategory"
             :key="item.value"
             :label="item.cate_name"
             :value="item.id">
         </el-option>
       </el-select>
       <!--      @@@@@@@@@@@-->
       文发布状态：
       <el-select v-model="page.state" placeholder="请选择文章状态">
         <el-option label="已发布" value="已发布"></el-option>
         <el-option label="草稿" value="草稿"></el-option>
       </el-select>
       <el-button type="primary" plain @click="filterArticleCondition">筛选</el-button>
       <el-button type="info" plain @click="resetFilterArticleCondition">重置</el-button>
       <el-button type="primary" plain @click="addArticle" style="margin-left: 200px">发表文章</el-button>
     </div>
   </div>
    <!--      文章列表表格-->
    <el-table :data="articleList" style="width: 100%;" border stripe v-loading="loading">
      <el-table-column label="文章标题" prop="title" />
      <el-table-column label="分类" prop="cate_name"/>
      <el-table-column label="发表时间" prop="pub_date">
        <template v-slot="{ row }">
          <span>{{filterDay(row.pub_date)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"/>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" plain  @click="showDetailFn(row.id)">查看</el-button>
          <el-button type="danger" plain v-onceClick="10000" @click="removeFn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--      列表分页-->
    <div class="paginationBox">
      <el-pagination
          v-model:currentPage="page.pagenum"
          v-model:page-size="page.pagesize"
          :page-sizes="[10, 6, 4, 1]"
          :background="background"
          :small="small"
          :disabled="disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChangeFn"
          @current-change="handleCurrentChangeFn"
      />
    </div>

    <AddArticle :isShowAddArticle="isShowAddArticle" @closeAddArticleDialog="closeAddArticleDialog" @ArticleList="ArticleList"/>
    <ArticleDetail :isShowDetail="isShowDetail" :id="id" @closeDetailDialog="closeDetailDialog"/>
  </el-card>

</div>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import {delArticleItem, getArticleClassification, getArticleList} from "@/api";
import {ElMessage, ElPagination} from "element-plus";
import AddArticle from './addArticleDialog'
import ArticleDetail from './articleDetailDialog'
import dayjs from 'dayjs'
export default {
  name: "IndexV",
  components:{ ArticleDetail, AddArticle, ElPagination},
  setup(){
    /*
    状态
    */
    // 文章分类列表
    let articleListCategory = reactive([])

    // 文章列表
    let articleList = reactive([])

    // 请求文章列表参数
    let page = reactive({
      pagenum: 1,
      pagesize: 10,
      cate_id: '',
      state: ''
    })

    // 文章总数
    let total = ref()

    // 表单加载
    let loading = ref(true)

    // 分页参数
    let background = ref(false)
    let disabled = ref(false)
    let small = ref(false)

    // 添加文章dialog开关
    let isShowAddArticle = ref(false)

    // 查看文章dialog开关
    let isShowDetail = ref(false)

    // 查看文章传过去的id
    let id = ref('')


    /*
    方法
    */
    // 获取文章分类列表
    const getArticleClassificationList = async () => {
      articleListCategory.length = 0
      const res = await getArticleClassification()
      articleListCategory.push(...res.data)
    }

    // 获取文章列表
    const ArticleList = async () => {
      loading.value = true
      articleList.length = 0
      console.log(1)
      const res = await getArticleList(page)
      articleList.push(...res.data)
      total.value = res.total
      loading.value = false
    }

    //  分页-改变每页展示条数
    const handleSizeChangeFn = async(newSize) =>{
      page.pagesize = newSize
      page.pagenum = 1
      await ArticleList()
    }

    //  分页-改变页数
    const  handleCurrentChangeFn = async(newPage) =>{
      page.pagenum = newPage
      await ArticleList()
    }

    //获取过滤后的列表
    const filterArticleCondition = async() => {
      await ArticleList()
    }

    // 重置列表
    const resetFilterArticleCondition = async () => {
      page.pagenum = 1
      page.pagesize = 10
      page.cate_id = ''
      page.state = ''
      await ArticleList()
    }

    // 删除列表项
    const removeFn = async (data) => {
      const res = await delArticleItem({id: data})
      ElMessage.success(res.message)
      await ArticleList()
    }

    // 查看文章
    const showDetailFn = (data) => {
      id.value = data
      isShowDetail.value = true
    }

    // 关闭详情dialog回调
    const closeDetailDialog = () => {
      isShowDetail.value = false
    }

    // 表格时间格式化
    const filterDay = (day) => {
      return dayjs(day).format('YYYY-MM-DD HH:mm:ss')
    }

    // 添加文章
    const addArticle = () => {
      isShowAddArticle.value = true
    }

    // 关闭添加文章dialog回调
    const closeAddArticleDialog = () => {
      isShowAddArticle.value = false
    }

    /*
    生命周期
    */
    onMounted(async () => {
      await getArticleClassificationList()
      await ArticleList()
    })

    return{
      articleListCategory,
      articleList,
      page,
      background,
      disabled,
      small,
      loading,
      total,
      isShowDetail,
      id,
      isShowAddArticle,
      dayjs,
      getArticleClassificationList,
      getArticleList,
      handleSizeChangeFn,
      handleCurrentChangeFn,
      filterArticleCondition,
      resetFilterArticleCondition,
      removeFn,
      filterDay,
      showDetailFn,
      closeDetailDialog,
      closeAddArticleDialog,
      addArticle,
      ArticleList
    }
  }
}
</script>

<style scoped lang="less">
/*文章列表*/
.paginationBox{
  display: flex;
  justify-content: center;
}
.el-pagination {
  margin-top: 20px;
}
/*文章列表头部*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 98%;
  margin: 20px;
}

.el-select{
  margin-right: 10px;
}


/*文章列表部*/
.el-table{
  margin-top: 50px;
}
.title {
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}

.info {
  font-size: 12px;
span {
  margin-right: 20px;
}
}
::v-deep .detail-box {
img {
  width: 500px;
}
}
</style>
